<template>
  <div class="release-page">
    <van-nav-bar
      title="发布房源"
      class="collectTop"
      left-arrow
      @click-left="regFn"
    />
    <div class="kong"></div>

    <div class="title"><p>房源信息</p></div>
    <div class="Tname"><p>小区名称</p><input type="text" placeholder="请输入小区名称 >"></div>
    <div class="Tname"><p>租&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;金</p><input  class="zj" type="text" placeholder="请输入租金/月">￥/月</div>
    <div class="Tname"><p>建筑面积</p><input class="mj" type="text" placeholder="请输入建筑面积">m²</div>
 <!-- 户型 -->
    <van-field
  readonly
  clickable
  name="picker"
  :value="value"
  label="户    型"
  input-align="right"
  placeholder="请选择 >"
  @click="showPicker = true"
/>
<van-popup v-model="showPicker" position="bottom">
  <van-picker
    show-toolbar
    :columns="columns"
    @confirm="onConfirm"
    @cancel="showPicker = false"
  />
</van-popup>
<!-- 楼层 -->
  <van-field
  readonly
  clickable
  name="picker"
  :floor="floor"
  label="所在楼层"
  input-align="right"
  placeholder="请选择 >"
  @click="showFloor = true"
/>
<van-popup v-model="showFloor" position="bottom">
  <van-picker
    show-toolbar
    :columns="floor"
    @confirm="floorConfirm"
    @cancel="showFloor = false"
  />
</van-popup>
<!-- 朝向 -->
  <van-field
  readonly
  clickable
  name="picker"
  :direction="direction"
  label="朝向"
  input-align="right"
  placeholder="请选择 >"
  @click="showDirection = true"
/>
<van-popup v-model="showDirection" position="bottom">
  <van-picker
    show-toolbar
    :columns="direction"
    @confirm="directionConfirm"
    @cancel="showDirection = false"
  />
</van-popup>

<div class="info"><p>房源标题</p></div>
<div class="bt" ><input type="text" placeholder="请输入标题(例如：整租 小区名 2室 5000元)"></div>
<div class="img"><p>房屋图像</p></div>
<van-field name="uploader">
  <template #input>
    <van-uploader  />
  </template>
</van-field>

<div class="img"><p>房屋描述</p></div>
<div class="bt" ><input type="textarea"  placeholder="请输入房屋描述信息"></div>
<!-- <div class="kong"></div> -->

 <div class="footer">
          <van-button class="left" type="info" native-type="button"
            >取消</van-button
          >
          <van-button class="right" type="info" native-type="submit"
            >提交</van-button
          >
        </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      value: '',
      floor: '',
      direction:'',
      columns: ['一室', '二室', '三室', '四室', '四室+'],
      floor:['高楼层','中楼层','低楼层'],
      direction:['东','西','南','北','东南','东北','西南','西北',],
      showPicker: false,
      showFloor:false,
      showDirection:false,
    }
  },
  methods: {
    onConfirm(value) {
      this.value = value;
      this.showPicker = false;
    },
    floorConfirm(){
      this.floor = floor
      this.showFloor = false;
    },
    directionConfirm(){
      this.direction = direction;
    this.showDirection = false;
    },
    regFn(){
      this.$router.back();
    },
    
  },

};
</script>

<style lang="less" scoped>
.collectTop {
  position: fixed;
  width: 100%;
  .kong {
    width: 100%;
    height: 50px;
  }
}
.title{
  height: 30px;
  margin-top: -10px;
  color: #21b97a;
  border-bottom: 1px solid #ccc;
  padding-left: 15px;
}
.info{
  height: 30px;
  margin-top: -10px;
  border-bottom: 1px solid #ccc;
  padding-left: 15px;
}
.img{
  height: 30px;
  margin-top: -10px;
  border-bottom: 1px solid #ccc;
  padding-left: 15px;
}
.Tname{
  display: flex;
  align-items: center;
  height: 40px;
  border-bottom: 1px solid #ccc;
     padding-right: 20px;
     margin-left: 15px;
   color: #999;
  p{
  flex: 1;
  }
  input{
    width: 110px;
    font-size: 14px;
    border: none;
    height: 20px;
  }
}
.zj {
  margin-right: 100px;
}
.mj {
  margin-right: 120px;
}
.bt{
  width: 100%;
  font-size: 14px;
  margin-left: 15px;
  height: 50px;
  display: flex;
  input{
    width: 100%;
      border: none;
      color:#bbb
  }
}
.footer{
  // position: fixed;
  // bottom: 0;
  display: flex;
  justify-content: space-between;
  .left{
    width: 50%;
  }
  .right{
    padding-left: 70px;
    width: 50%;
  }
}
</style>
